<template>
  <div class="login">
    <!--    <button @click="login"></button>-->
    <Tabs class="box" :value="pageComputed" style="padding: 60px 80px;">
      <TabPane label="登录" name="login">
        <div style="margin-top: 20px">
          <Form ref="formInline" :model="formInline" :rules="ruleLogin" class="form" autocomplete="off">
            <FormItem prop="user" label="用户名">
              <Input type="text" v-model="formInline.user" placeholder="Username">
                <Icon type="ios-person-outline" slot="prepend"></Icon>
              </Input>
            </FormItem>
            <FormItem prop="password" label="密码">
              <Input type="password" v-model="formInline.password" placeholder="Password">
                <Icon type="ios-lock-outline" slot="prepend"></Icon>
              </Input>
            </FormItem>
            <FormItem style="margin-top: 80px; display: flex; justify-content: center">
              <Button type="primary" @click="signIn('formInline')" style="width: 120px">登录</Button>
            </FormItem>
          </Form>
        </div>
      </TabPane>
      <TabPane label="注册" name="register">
        <div style="margin-left: -50px">
          <Form ref="formCustom" :model="formCustom" :rules="ruleRegister" :label-width="130" class="form"
                autocomplete="off">
            <FormItem label="用户名" prop="username" :required="true">
              <Input type="text" v-model="formCustom.username"></Input>
            </FormItem>
            <FormItem label="密码" prop="passwd" :required="true">
              <Input type="password" v-model="formCustom.passwd"></Input>
            </FormItem>
            <FormItem label="密码确认" prop="passwdCheck" :required="true">
              <Input type="password" v-model="formCustom.passwdCheck"></Input>
            </FormItem>
            <FormItem label="手机号码" prop="phone" :required="true">
              <Input type="text" v-model="formCustom.phone"></Input>
            </FormItem>
            <FormItem label="验证码" prop="confirmCode" :required="true">
              <Row>
                <Col span="11">
                  <Input type="text" v-model="formCustom.confirmCode"></Input>
                </Col>
                <Col span="2" style="text-align: center">-</Col>
                <Col span="11">
                  <Button type="primary" @click="getCaptcha">获取验证码</Button>
                </Col>
              </Row>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="handleSubmitRegister('formCustom')">注册</Button>
              <Button @click="handleReset('formCustom')" style="margin-left: 8px">重置</Button>
            </FormItem>
          </Form>
        </div>
      </TabPane>
    </Tabs>
  </div>
</template>

<script>
export default {
  name: 'Login',
  props: {
    page: {
      required: true,
      default: 'login'
    }
  },
  data () {
    // 验证密码输入
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('Please enter your password'))
      } else {
        if (this.formCustom.passwdCheck !== '') {
          // 对第二个密码框单独验证
          this.$refs.formCustom.validateField('passwdCheck')
        }
        callback()
      }
    }
    // 验证两次密码是否一样
    const validatePassCheck = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('Please enter your password again'))
      } else if (value !== this.formCustom.passwd) {
        callback(new Error('The two input passwords do not match!'))
      } else {
        callback()
      }
    }

    // 模拟验证常规数据
    const validate = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('cannot be empty'))
      }
    }

    // 数据验证以及服务端验证
    const validateOnServer = (rule, value, callback, url) => {
      if (value === '') {
        callback(new Error('cannot be empty'))
      } else {
        this.$post({
          url: url,
          data: value
        }).then(res => {
          if (res.code === 20001) {
            callback(new Error(res.message))
          }
          callback()
        })
      }
    }

    return {
      // 验证登录数据
      ruleLogin: {
        user: [
          {
            required: true,
            message: 'Please fill in the user name',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: 'Please fill in the password.',
            trigger: 'blur'
          },
          {
            type: 'string',
            min: 6,
            message: 'The password length cannot be less than 6 bits',
            trigger: 'blur'
          }
        ]
      },
      // 匹配注册表单的各种验证方法
      ruleRegister: {
        passwd: [
          {
            validator: validatePass,
            trigger: 'blur'
          }
        ],
        passwdCheck: [
          {
            validator: validatePassCheck,
            trigger: 'blur'
          }
        ],
        age: [
          {
            validator: validate,
            trigger: 'blur'
          }
        ]
        // phone: [
        //   {
        //     validator: validate,
        //     trigger: 'blur'
        //   }
        // ],
        // confirmCode: [
        //   {
        //     validator: validate,
        //     trigger: 'blur'
        //   }
        // ]
      },
      // 存储登录数据
      formInline: {
        user: '',
        password: ''
      },
      // 存放注册表单数据
      formCustom: {
        passwd: '',
        passwdCheck: '',
        age: '',
        phone: '',
        username: '',
        confirmCode: ''
      }
    }
  },
  computed: {
    pageComputed () {
      return this.page
    }
  },
  methods: {
    getCaptcha () {
      this.$post('/user/register/getVerificationCode', { phone: this.formCustom.phone })
        .then(res => {
          if (res.code === 20000) {
            this.$Message.success('验证码已发送')
          } else {
            this.$Message.error(res.message)
          }
        })
    },

    // 提交登录表单
    signIn (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$post(
            '/oauth/login',
            {
              username: this.formInline.user,
              password: this.formInline.password
            }).then(res => {
            console.log(res)
            if (res.code === 20000) {
              this.$Notice.success({
                title: '登录成功'
              })
              this.$store.commit('userStatus', {
                isLogin: true,
                userType: 0,
                accessToken: res.data.accessToken
              })
              // alert(res.data.accessToken)
              // this.$router.push('/home')
              this.$emit('closeModal')
            } else {
              this.$Notice.error({
                title: '登录失败',
                desc: res.message
              })
            }
          })
        } else {
          this.$Message.error('填写数据格式不正确')
        }
      })
    },
    // 提交注册表单
    handleSubmitRegister (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success('正在注册!')
          this.$post('/user/register/verifyCode', {
            phone: this.formCustom.phone,
            code: this.formCustom.confirmCode
          }).then(res => {
            if (res.code === 20000) {
              this.$postApplicationJson('/user/register', {
                nickname: this.formCustom.username,
                password: this.formCustom.passwd,
                userPhone: this.formCustom.phone
              }).then(res => {
                if (res.code === 20000) {
                  this.$store.state.isLogin = true
                  this.$Message.success('注册成功 ')
                  this.$emit('closeModal')
                } else {
                  this.$Message.error(res.message)
                }
              })
            } else {
              this.$Notice.error({
                title: '注册失败',
                desc: res.message
              })
            }
          })
        } else {
          this.$Message.error('填写数据格式不正确')
        }
      })
    },
    // 注册表单重置
    handleReset (name) {
      this.$refs[name].resetFields()
    }
  }

}
</script>

<style scoped>
.login {
  /*background-color: #f6f1f1;*/
  background-image: url("../assets/img/back1.png");
  background-repeat: no-repeat;
  background-size: cover;
  margin: -18px;
  border-radius: 5px;
}

.input {
  height: 30px;
}

</style>
